<script setup lang="ts">
import { showToast } from 'vant';
import { onMounted, ref } from 'vue'
import logo from '@/assets/logo.png'
import { imgList, showImg, closeShowImg } from '@/api/index'
const list = ref([] as any)

const initData = () => {
  imgList().then(res => {
    list.value = res.data
  })
  
}

const onClickPrew = (item:any) => {
  if (item.if_show == '1') {
    closeShowImg({id: item.id}).then((res:any) => {
      item.if_show = '0'
      showToast({
        message: '关闭预览成功',
        wordBreak: 'break-word',
      })
    })
  } else {
    showImg({id: item.id}).then(() => {
      item.if_show = '1'
      showToast({
        message: '预览成功',
        wordBreak: 'break-word',
      })
    })
  }
  
  
}

onMounted(() => {
  initData()
})
</script>

<template>
  <div class="index-wraper">
    <van-sticky>
      <p class="index-title">智能投屏</p>
      <div class="index-logo">
        <van-image class="logo" :src="logo" />
      </div>
    </van-sticky>
    <div class="index-list-wraper">
      <div class="index-list">
        <div class="index-card" v-for="(item, index) in list" :key="index">
            <p class="index-card-title oneLine">{{item.name}}</p>
            <van-image class="index-card-img" :src="item.url" />
            <div class="index-card-btn">
              <van-button @click="onClickPrew(item)" class="btn" block type="primary">{{item.if_show == '1'?'关闭预览':'预览'}}</van-button>
            </div>
          </div>
      </div>
    </div>
    
    <!-- <van-nav-bar title="智能投屏" fixed placeholder /> -->
  </div>
</template>

<style scoped lang="scss">
.index-wraper {
  background: linear-gradient(160deg, #74BEEA 10%, #FFFFFF 50%);
  overflow: hidden;
  .index-title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    height: 100px;
    line-height: 100px;
  }
  .index-logo {
    width: 100%;
    padding: 0 40px;
    height: 100px;
    box-sizing: border-box;
    .logo {
      width: 100%;
      display: block;
    }
  }
  .index-list-wraper {
    height: calc(100% - 200px);
    padding: 0 40px;
    box-sizing: border-box;
    overflow-y: auto;
    
  }
  .index-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }
  .index-card {
    width: calc(50% - 20px);
    &-title {
      text-align: center;
      font-size: 28px;
      line-height: 28px;
      margin-bottom: 10px;
    }
    &-img {
      width: 100%;
      height: 40vw;
      display: block;
    }
    &-btn {
      padding: 20px 20px 40px 20px;
      box-sizing: border-box;
      .btn {
        height: 70px;
        border-radius: 20px;
        
      }
    }
    
  }
}
</style>